
<template>
  <div>
    <van-cascader
        v-bind="$attrs"
        title="请选择所在地区"
        :options="options"
        @change="onChange"
        :field-names="fieldNames"
    />
  </div>
</template>

<script setup name="cascader">
import {GET_CITY_LIST, GET_DISTRICT_LIST} from "@/api/provinceCity.js";

const fieldNames = {
  text: 'name',
  value: 'code',
  children: 'children',
};
const options = ref([]);
const onChange = async (val) => {
  console.log("点击选择：",val)
  if (val.tabIndex == 0) {
    const res = await GET_DISTRICT_LIST({
      cityCode: val.value
    });
    let districtList = res.data.map((item) => {
      return {
        name: item.districtName,
        code: item.districtCode
      }
    })
    options.value = options.value.map((item) => {
      if (item.code == val.value) {
        item.children = districtList
      }
      return item
    })
  }
}
onMounted(async () => {
  const res = await GET_CITY_LIST({
    provinceCode: 370000
  });
  options.value = res.data.map((item) => {
    return {
      name: item.cityName,
      code: item.cityCode,
      children: []
    }
  })
});
</script>
<style lang="less">
</style>